<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>账号管理-管理系统</title>
	<meta name="keywords" content="管理系统">
	<meta name="description" content="管理系统">
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<meta name="apple-mobile-web-app-status-bar-style" content="black"> 
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="format-detection" content="telephone=no">
	<link rel="stylesheet" href="{$sys_url.static}layui/css/layui.css" media="all">
</head>
<body>
	<div>
		<form class="layui-form">
			<div class="layui-form-item layui-elem-quote">
				<label class="layui-form-label">ID</label>
				<div class="layui-input-inline">
					<input type="text" name="id" id="id" autocomplete="off" placeholder="ID" class="layui-input">
				</div>

				<button type="button" class="layui-btn btnSearch" lay-filter="search" lay-submit>查询</button>
				<button type="button" class="layui-btn layui-btn-normal btnAdd">+ 新增</button>
			</div>
		</form>
		<table class="layui-hide" id="tableList" lay-filter="demo"></table>
	</div>
</body>
<script src="{$sys_url.static}layui/layui.js" charset="utf-8"></script>
<script type="text/html" id="statusSwitch">
    <!--0:禁用; 1:启用 -->
    <input type="checkbox" name="status" id="{{d.id}}" value="{{d.status}}" lay-skin="switch" lay-text="禁用|启用" lay-filter="statusDemo" {{ d.status == 1 ? 'checked' : '' }}>
</script>
<script type="text/html" id="barDemo">

</script>
<script>
layui.use('table', function(){
	var table = layui.table;
	var $ = layui.jquery;
    var form = layui.form;
	//加载表格
	table.render({
		elem: '#tableList'
		,url:'{$sys_url.ctr}/getOnlineList'
		,cellMinWidth: 80
                //全局定义常规单元格的最小宽度，layui 2.2.1 新增
		,cols: [[
			{field:'id', width:'5%', title: 'ID', sort: true, align:'center'},
            {field:'appid', title: '开发者ID', align:'center'},
            {field:'appsecret', title: '秘钥', align:'center'},
			{field:'add_time', title: '添加时间', align:'center',templet: "<div>{{layui.util.toDateString(d.createTime, 'yyyy-MM-dd HH:mm:ss')}}</div>"},
            {field:'status', title: '状态', align: 'center', templet: '#statusSwitch', unresize: true},
			{fixed: 'right', width:260, title: '操作', align:'center', toolbar: '#barDemo'}
		]],
		page: true,
        limit:20,
        request: {
            pageName: 'page' //页码的参数名称，默认：page
            , limitName: 'pageNum' //每页数据量的参数名，默认：limit
        }
	});
	//重载表格
	$('.btnSearch').on('click',function(){
		table.reload('tableList',{
			page: {
				curr: 1
                                //重新从第 1 页开始
			},
			where: {
				key: {
					id: $('#id').val(),
					name: $('#name').val(),
                    id_example:'{$id_example}',
				}
			}
		});
	});


    //监听禁用启用操作
    form.on('switch(statusDemo)', function (obj) {
        var id=this.id;
        var status=0;
        if(obj.elem.checked){ status=1}
        $.ajax({
            url: '{$sys_url.ctr}/status',
            type: 'post',
            data: {ids: id,status:status },
            dataType: "json",
            beforeSend: function () {

            },
            success: function (data) {
                //do something
                console.log(data);
                if (data.code == 1) {
                    var index = parent.layer.getFrameIndex(window.name);
                    //获取当前窗口索引
                    parent.layer.msg('操作成功', {icon: 1});
                    //table.reload('tableList');
                } else {
                    layer.alert('抱歉，系统繁忙，请稍后再试！', {icon: 2});
                }
            },
            error: function (data) {
                //do something
                console.log(data);
                layer.msg('与服务器连接失败', {icon: 2});
            }
        });
//        layer.tips(this.value + ' ' + this.name+ '：' + obj.elem.checked, obj.othis);
    });


	//监听工具条
	table.on('tool(demo)', function(obj){
		var data = obj.data;
        var _this = $(this);
		if(obj.event === 'detail'){
			layer.open({
				title: '查看账号',
				type: 2,
				shade: false,
				area: ['800px', '600px'],
				maxmin: true,
				btnAlign: 'c',
				anim: 0,
				shade: [0.5, 'rgb(0,0,0)'],
				content: 'userLook.html?id='+data.id,
				zIndex: layer.zIndex,
                                //重点1
				success: function(layero){
					//layer.setTop(layero); //顶置窗口
				},
				yes: function(index, layero){
					//确认按钮
				}
			});
		} else if(obj.event === 'del'){
			layer.confirm('ID：'+data.id, {icon: 3, title:'是否确定删除?'}, function(index){
                            console.log(index);
                            if(index>=1)
                            {
                                $.ajax({
				url:'{$sys_url.ctr}/del',
				type:'post',
				data:{ id:data.id },
				dataType:"json",
				beforeSend:function(){
					 console.log(JSON.stringify(data.field));
				},
				success:function(data){
					//do something
                                          console.log(data);
					if(data.code==1){

						var index = parent.layer.getFrameIndex(window.name);

                                                //获取当前窗口索引
						parent.layer.msg('删除成功', {icon : 1});
						table.reload('tableList');
					} else {
						layer.alert('抱歉，系统繁忙，请稍后再试！',{icon:2});
					}
				},
				error:function(data){
					//do something
                                        console.log(data);
					layer.msg('与服务器连接失败',{icon: 2});
				}
			});
			layer.close(index);


                            }
			});
		} else if(obj.event === 'edit'){
			layer.open({
				title: '编辑',
				type: 2,
				shade: false,
				area: ['800px', '600px'],
				maxmin: true,
				btnAlign: 'c',
				anim: 0,
				shade: [0.5, 'rgb(0,0,0)'],
				content: '{$sys_url.ctr}/edit?id='+data.id+'&id_example={$id_example}',
				zIndex: layer.zIndex, //重点1
				success: function(layero){
					//layer.setTop(layero); //顶置窗口
				},
				yes: function(index, layero){
					//确认按钮
				}
			});
		}else if(obj.event === 'ban'){
            layer.confirm('ID：'+data.id, {icon: 3, title:'是否确定禁用?'}, function(index){
                $.ajax({
                    url:'{$sys_url.ctr}/status',
                    type:'post',
                    data:{ ids:data.id,status:"0" },
                    dataType:"json",
                    beforeSend:function(){
                        console.log(JSON.stringify(data.field));
                    },
                    success:function(data){
                        //do something
                        console.log(data);
                        if(data.code==1){
//                                var index = parent.layer.getFrameIndex(window.name);
                            //获取当前窗口索引
                            parent.layer.msg('禁用成功', {icon : 1});
//                                parent.layer.close(index);
//                                _this.addClass('layui-hide');
                            parent.layer.close(index);
                            table.reload('tableList');

                            //重新加载父级tabel数据
                        } else {
                            layer.alert('抱歉，系统繁忙，请稍后再试！',{icon:2});
                        }
                    },
                    error:function(data){
                        //do something
                        console.log(data);
                        layer.msg('与服务器连接失败',{icon: 2});
                    }
                });
                layer.close(index);

            });
        }else if(obj.event === 'start-up'){
            layer.confirm('ID：'+data.id, {icon: 3, title:'是否确定启用?'}, function(index){
                $.ajax({
                    url:'{$sys_url.ctr}/status',
                    type:'post',
                    data:{ ids:data.id,status:"1" },
                    dataType:"json",
                    beforeSend:function(){
                        console.log(JSON.stringify(data.field));
                    },
                    success:function(data){
                        //do something
                        console.log(data);
                        if(data.code==1){
//                                var index = parent.layer.getFrameIndex(window.name);
                            //获取当前窗口索引
                            parent.layer.msg('启用成功', {icon : 1});
                            parent.layer.close(index);
                            table.reload('tableList');
                            //重新加载父级tabel数据
                        } else {
                            layer.alert('抱歉，系统繁忙，请稍后再试！',{icon:2});
                        }
                    },
                    error:function(data){
                        //do something
                        console.log(data);
                        layer.msg('与服务器连接失败',{icon: 2});
                    }
                });
                layer.close(index);



            });
        } else if(obj.event === 'conf'){
            layer.open({
                title: '编辑',
                type: 2,
                shade: false,
               area: ['800px', '600px'],
                maxmin: true,
                btnAlign: 'c',
                anim: 0,
                shade: [0.5, 'rgb(0,0,0)'],
                content: '{$sys_url.ctr}/config/id/'+data.id,
                zIndex: layer.zIndex, //重点1
                success: function(layero){
                    //layer.setTop(layero); //顶置窗口
                },
                yes: function(index, layero){
                    //确认按钮
                }
            });
        } else if (obj.event === 'ass1') {
            parent.layui.index.openTabsPage(_this.attr('lay-href'),_this.attr('title'));
        }
	});
	//新增
	$('.btnAdd').on('click',function(){

		layer.open({
			title: '新增',
			type: 2,
			shade: false,
			area: ['800px', '600px'],
			maxmin: true,
			btnAlign: 'c',
			anim: 0,
			shade: [0.5, 'rgb(0,0,0)'],
			content: '{$sys_url.ctr}/add?id_example={$id_example}',
			zIndex: layer.zIndex,
                        //重点1
			success: function(layero){
				//layer.setTop(layero); //顶置窗口
			},
			yes: function(index, layero){
				//确认按钮
			}
		});
	});
});
</script>
</html>